import React, { Component ,Fragment} from 'react';
import Circle from './Circle';


require('./css/frame.css');



export default  class P1  extends Component {
	constructor(...args){
		super(...args);
		this.state={
		  t1:false
    }
	};

  componentDidMount() {

  }

  onClick(){
    this.setState({
      t1:true
    })
  }
  onOver(e){
      this.setState({
        t1:true
      })
  }
  onOut(){
    this.setState({
      t1:false,
    })
  }


  render(){
    const { t1}=this.state;
		return (
            <div id="page">
                <div className="content" id="box1">
                   <h4 className="title">众智APP产品介绍</h4>
					<p className="par">手机APP同车机导航通过网络连接，实现手机端与车机端数据传递</p>
                   <div className="bgimg">
                        <img src={require("./img/2_03.jpg")} />
                    </div>
                  <img src={require("./img/add2_03.jpg")} id='add2'/>
                  <p id='add2p'>可在车机设置内点击“众智APP下载”，<br></br>扫取如右侧所示二维码，下载APP。</p>
                  
                  
                  <Circle style={{left: '220px', top: '220px'}}
                    data="1、手机、车机连接同一无线网络<br>2、车机连接手机开启的热点"
                  />
                  <Circle style={{left: '640px', top: '320px'}}
                    data="手机搜寻目的地，发送至车机导航"
                  />
                  <Circle style={{left: '740px', top: '320px'}}
                    data="车将最终位置发送至手机，由手机实现停车位置与目标位置之间导航"
                  />
                  <Circle style={{left: '740px', top: '420px'}}
                    data="创建行程安排，自动收藏至车机导航，并按设定时间提前提醒"
                  />
                  <Circle style={{left: '640px', top: '420px'}}
                          data="客户自己可通过APP更新导航地图"
                  />

                  <img
                    src={require("./img/red0.png")}
                    className="circle"
                    style={{left:'760px',top:"103px"}}
                    onClick={this.onClick.bind(this)}
                    onMouseOver={this.onOver.bind(this)}
                    onMouseOut={this.onOut.bind(this)}
                    id='g1'
                  />


                  {t1 && <div className="tips" style={{left:'630px',top:"155px"}} id="tip1">
                    <span className="topspan2" style={{left:'125px',top:"-30px"}}></span>
                    <div className="tipcont" id="words">
                      <p>连接状态：</p>
                      <p><img src={require("./img/ma0.jpg")} alt=""/>手机与车机未连接</p>
                      <p><img src={require("./img/ma1.jpg")} alt=""/>手机与车机正在连接</p>
                      <p><img src={require("./img/ma2.jpg")} alt=""/>手机与车机已连接</p>
                    </div>
                  </div>}

                </div>
            </div>
		);
	}
	
}


